<template>
  <div class="base-data-wrapper">
    <div class="title">
      <h2>基本数据</h2>
    </div>

    <span></span>

    <div class="data-wrapper">
      <ul class="fans-data-list">
        <li v-for="(data, idx) in workDatas" :key="idx">
          <h3>{{data.cover}}</h3>
          <h4>{{userInfos[data.key]}}</h4>
        </li>
      </ul>
      <ul class="work-data-list">
        <li v-for="(data, idx) in evaluateDatas" :key="idx">
          <h3>{{data.cover}}</h3>
          <h4>{{userInfos[data.key]}}</h4>
        </li>
      </ul>
    </div>

    <!-- <div class="chart">
      <echart-line ref="chart"></echart-line>
    </div> -->
  </div>
</template>

<script>
import { mapState } from 'vuex';

// import EchartLine from '@c/utils/EchartLine.vue';

  export default {
    components: {
      // EchartLine,
    },
    data() {
      return {
        workDatas: [
          {
            cover: '文章数',
            key: 'article_num',
          },
          {
            cover: '资源数',
            key: 'source_num'
          },
          {
            cover: '专栏数',
            key: 'column_num'
          }
        ],
        evaluateDatas: [
          {
            cover: '点赞数',
            key: 'like_num'
          },
          {
            cover: '收藏数',
            key: 'collect_num'
          },
          {
            cover: '评论数',
            key: 'comment_num'
          }
        ]
      }
    },
    computed: {
      ...mapState(['user']),
      userInfos() {
        return this.user.infos;
      }
    },
    mounted () {
      // this.$refs.chart.init('最近阅读量', ['A', 'B', 'C', 'D', 'E'], [
      //   {
      //     name: '阅读量',
      //     data: [20, 50, 70, 40, 18]
      //   }
      // ]);
    },
  }
</script>

<style lang="less" scoped>
@w: var(--w);
@fs: calc(@w * 0.01);

.base-data-wrapper {
  box-sizing: border-box;
  width: @w;

  .title {
    --th: calc(@w * 0.06);
    --fs: calc(var(--th) * 0.4);
    box-sizing: border-box;
    width: @w;
    height: var(--th);
    line-height: var(--th);
    font-size: var(--fs);
    text-indent: var(--fs);
  }

  span {
    display: block;
    width: @w;
    height: 1px;
    background-color: var(--gray);
  }

  .data-wrapper {
    padding: calc(@w * 0.015) calc(@w * 0.03);
    height: calc(@w * 0.25);

    ul {
      display: flex;
      justify-content: space-between;

      height: 50%;

      &:last-child {
        margin-top: calc(@w * 0.02);
      }

      li {
        width: 30%;
        height: 100%;

        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        text-align: center;

        background-color: rgb(246, 250, 255);
        // background-color: var(--cyan);
        border-radius: calc(@fs * 0.3);

        h3 {
          font-size: calc(@fs * 2.2);
        }

        h4 {
          font-size: calc(@fs * 3);
        }
      }
    }
  }

  .chart {
    // width: @w;
    margin: 5%;
    height: calc(@w * 0.5);
  }
}
</style>